import React from "react"
import {connect} from 'react-redux'
import {NavLink} from "react-router-dom"
import {BarChart2, Calendar, ArrowRightCircle} from "react-feather"
import {Card, CardHeader, CardTitle, CardBody, CardFooter, Row, Col, FormGroup, Input, Form, Button} from "reactstrap"
import Breadcrumbs from "../../../components/@vuexy/breadCrumbs/BreadCrumb"
import {getProjectList, setRequestParams, getProject, getSpotifyList} from '../../../redux/actions/projects'
import {setData} from '../../../redux/actions/helper'
import {textSize} from '../../../helpers/utils'
import {Search, Edit3} from "react-feather"
import "../../../assets/scss/pages/projects.scss"
import Paginate from "../../../components/@vuexy/paginate";
import FullSpinnerDimming from "../../../components/@vuexy/spinner/Full-spinner-dimming";
import ProjectModal from '../../../components/pages/projects/project-modal'
import {SET_MODAL_STATUS, SET_REQUEST_TYPE, CLEAR_PROJECT_ALL_STATE} from "../../../redux/constants/projects";
import {SET_ANALYTICS_SELECTED_PROJECT} from '../../../redux/constants/analytics'
import {dateFormat, parseUnixTime} from '../../../helpers/utils'
import {PrivateProjectProvider} from "../../../providers/PrivateProjectProvider";

class Projects extends React.Component {

  state = {
    value: ""
  }

  requestTime = null;

  componentDidMount() {
    this.props.getProjectList(this.props.requestParams)
  }

  componentWillUnmount() {
    this.props.setData(CLEAR_PROJECT_ALL_STATE)
  }

  onPageChange = page => {
    this.props.setRequestParams({"page": page})
    this.props.getProjectList({...this.props.requestParams, "page": page})
  }

  handleOnChange = event => {
    this.setState({
      value: event.target.value
    })

    this.props.setRequestParams({"search": event.target.value, "page": 1})

    clearTimeout(this.requestTime);

    this.requestTime = setTimeout(() => {
      this.props.getProjectList({...this.props.requestParams, "search": this.state.value})
    }, 700)
  }

  modalOpen = type => {
    this.props.setData(SET_REQUEST_TYPE, type)
    this.props.setData(SET_MODAL_STATUS, true)
  }

  render() {
    return (
      <React.Fragment>
        <Breadcrumbs
          breadCrumbTitle="Список проектов"
          breadCrumbParent="Проекты"
          breadCrumbActive="Список проектов"
        />
        <ProjectModal/>
        <Row id="search-website">
          <Col xs="12" md="8" xl="6">
            <div className="project-search search-bar mb-2">
              <Form>
                <FormGroup className="position-relative has-icon-left mb-0">
                  <Input
                    type="text"
                    className="round"
                    placeholder="Попробуй поискать здесь"
                    value={this.state.value}
                    onChange={this.handleOnChange}
                  />
                  <div className="form-control-position px-1">
                    <Search size={15}/>
                  </div>
                </FormGroup>
              </Form>
            </div>
          </Col>
          <Col xs="12" md="4" xl="6" className="d-flex justify-content-md-end project-add-btn-container mb-1">
            <Button.Ripple
              color="danger"
              className="project-add-btn px-md-6"
              onClick={() => this.modalOpen("create")}
            >
              Добавить проект
            </Button.Ripple>
          </Col>
        </Row>

        <Row>
          {this.props.spinner.includes('projects-list') && <FullSpinnerDimming/>}

          {
            this.props.list.map((item, index) =>
              <Col xs="12" md="6" xl="4" key={index} className="mb-2">
                <Card className="mb-0 h-100">
                  <CardHeader>
                    <div className="project-card-header">
                      <CardTitle className="pt-1 project-card-title">
                        <span>{item.name && item.name.length > 23 ? `${item.name.slice(0, 20)}...` : item.name}</span>
                        <PrivateProjectProvider owner={item.owner.id} verifyId={this.props.verifyId}>
                              <span
                                className="project-edit-icon"
                                onClick={() => {
                                  this.modalOpen("update")
                                  this.props.getProject(item.id, {
                                    ...this.props.requestParams,
                                    includes: this.props.requestParams.includes + ',owners'
                                  })
                                }}
                              >
                                <Edit3 color="#EBEEFC" width="18px"/>
                              </span>
                        </PrivateProjectProvider>

                      </CardTitle>
                      <div className="project-card-services pt-1 d-flex justify-content-end">
                        <NavLink
                          to={`/dashboard`}
                          className="project-link"
                          onClick={() => this.props.setData(SET_ANALYTICS_SELECTED_PROJECT, {
                            ...item,
                            value: item.id,
                            label: item.name
                          })}
                        >
                          <span>Аналитика</span>
                          <BarChart2 className="fonticon-wrap" size={15}/>
                        </NavLink>
                        <NavLink to={`/events?project_id=${item.id}`} className="project-link">
                          <span>События</span>
                          <Calendar className="fonticon-wrap" size={15}/>
                        </NavLink>
                      </div>
                    </div>
                  </CardHeader>
                  <CardBody className="pb-0 pt-2">
                    <div className="d-flex justify-content-start project-card-content">
                      <div>
                        <span className="project-card-item-title pr-1">Описание</span>
                      </div>
                      <div className="desc">
                        <p>{textSize(item.description || '', 90)}</p>
                      </div>
                    </div>
                  </CardBody>
                  <CardFooter className="border-0 pt-0">
                    <div className="project-card-footer">
                      <Row className="d-flex justify-content-between">
                        <Col xs="auto" className="d-flex align-items-center justify-content-end pt-1">
                          <span>{item.created_at ? dateFormat(parseUnixTime(item.created_at), 'dd.mm.yyyy') : ''}</span>
                        </Col>
                        <Col xs="auto" className="d-flex justify-content-end project-card-footer pt-1">
                          <NavLink to={`/events?project_id=${item.id}`} className="project-link">
                            <span>подробнее</span>
                            <ArrowRightCircle className="ml-1 fonticon-wrap" size={18}/>
                          </NavLink>
                        </Col>
                      </Row>
                    </div>
                  </CardFooter>
                </Card>
              </Col>
            )
          }
        </Row>
        <Paginate pagination={this.props.meta.pagination} onPageChange={this.onPageChange}/>
      </React.Fragment>
    )
  }
}

const mapStateToProps = state => (
  {
    requestParams: state.projects.requestParams,
    spinner: state.helper.spinner,
    list: state.projects.list,
    meta: state.projects.meta,
    verifyId: state.users.data.verify_id,
  }
)


export default connect(
  mapStateToProps, {
    setRequestParams,
    getProjectList,
    getProject,
    setData
  })(Projects)
